<template>
  <div class="page-baskets">
    <div class="che-title">
      <div>{{navs[Number(curTabId)].itemData.title}}</div>
      <div>{{navs[Number(curTabId)].itemData.content}}</div>
    </div>
    <a-tabs :default-active-key="curTabId" @change="changeTabs">
      <a-tab-pane v-for="(item,index) in navs" :key="index+''" :tab="item.title">
        <FryerItem :itemData="item" :execute="execute" :data="cheData.USDT"></FryerItem>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>


<script>
  import FryerItem from "./components/FryerItem"
  import {
    approvePoolToken,
    getTokenAddress,
    deposit,
    withdraw,
    borrow,
    repay,
    liquidate,
    getPoolinfo,
    getPoolAllowance
  } from "cheese-sdk"
  import {toFixed4, trace} from "../../../utils/tools"
  import {getBalanceToken} from "../../../api/user"
  import {mapGetters} from "vuex"

  export default {
    components: {FryerItem},
    props: {},
    data() {
      return {
        curTabId: "0",
        navs: [
          {
            title: "Deposit",
            itemData: {
              title: "Frying Baskets",
              content: "Deposit USDT/USDC/DAI in order to borrow FryUSD",
              btn: "Deposit",
              title1: "Wallet Balance",
              title2: "Collateral Balance",
              amount1: 0,
              amount2: 0,
            }
          },
          {
            title: "Borrow",
            itemData: {
              title: "Frying Baskets",
              content: "Borrow up to 50% the value of your collateral in FryUSD.",
              btn: "Borrow",
              title1: "Available to Borrow",
              title2: "Global Mintable FryUSD",
              amount1: 0,
              amount2: 0,
            }
          },
          {
            title: "Withdraw",
            itemData: {
              title: "Frying Baskets",
              content: "Wtihdraw your deposited USDT/USDC/DAI ",
              btn: "Withdraw",
              title1: "Available to Withdraw",
              title2: "",
              amount1: 0,
              amount2: 0,
            }
          },
          {
            title: "Repay",
            itemData: {
              title: "Frying Baskets",
              content: "Repay your debt with USDT/USDC/DAI and FryUSD",
              btn: "Repay",
              title1: "Wallet Balance (USDT/FryUSD)",
              title2: "Remaining FryUSD debt",
              amount1: [0, 0],
              amount2: 0,
            }
          },
          {
            title: "Liquidate",
            itemData: {
              title: "Frying Baskets",
              content: "Use your colleteral to repay your debt",
              btn: "Liquidate",
              title1: "Your colleteral balance",
              title2: "Remaining FryUSD Debt",
              amount1: 0,
              amount2: 0,
            }
          },

        ],

        cheData: {
          USDT: {
            symbol: "USDT",
            address: "",
            balance: "",
            collateral: "",
            poolInfo: {},
            allowance: 0,
          },
          FRIES: {
            symbol: "FRIES",
            address: "",
            balance: "",
            allowance: 0,
          }
        }

      };
    },
    methods: {
      changeTabs(key) {
        trace("key=", key)
        this.curTabId = key;
      },

      execute(name, data) {

        if (name == "Deposit") {

          if (this.cheData.USDT.allowance == 0) {
            approvePoolToken(this.cheData.USDT.address, "", "fryer", (code, hash) => {
              trace("approvePoolToken-USDT", code, hash);
              if (code == 1) {
                this.checkInfo();
              }
            });
            return;
          }

          deposit(this.cheData.USDT.address, data.amount, (code, hash) => {
            trace("deposit-USDT", code, hash);
            if (code == 1) {
              this.checkInfo();
            }
          });
        } else if (name == "Withdraw") {
          withdraw(this.cheData.USDT.address, data.amount, (code, hash) => {
            trace("withdraw-USDT", code, hash);
            if (code == 1) {
              this.checkInfo();
            }
          });
        } else if (name == "Borrow") {
          borrow(this.cheData.USDT.address, data.amount, (code, hash) => {
            trace("borrow-USDT", code, hash);
            if (code == 1) {
              this.checkInfo();
            }
          });
        } else if (name == "Repay") {
          trace("Repay=", data.amountfries, data.amount)
          if (data.amountfries > this.cheData.FRIES.allowance) {
            approvePoolToken(this.cheData.USDT.address, this.cheData.FRIES.address, "fryer", (code, hash) => {
              trace("approvePoolToken-FRIES", code, hash);
              if (code == 1) {
                this.checkInfo();
              }
            });
            return;
          }

          repay(this.cheData.USDT.address, data.amount, data.amountfries, (code, hash) => {
            trace("repay-USDT", code, hash);
            if (code == 1) {
              this.checkInfo();
            }
          });
        } else if (name == "Liquidate") {
          liquidate(this.cheData.USDT.address, data.amount, (code, hash) => {
            trace("liquidate-USDT", code, hash);
            if (code == 1) {
              this.checkInfo();
            }
          });
        }

      },


      async checkInfo() {
        //USDT
        this.cheData.USDT.address = getTokenAddress(this.cheData.USDT.symbol);
        this.cheData.USDT.balance = await getBalanceToken(this.cheData.USDT.address);
        this.cheData.USDT.poolInfo = (await getPoolinfo(this.cheData.USDT.address)).data;
        this.cheData.USDT.allowance = await getPoolAllowance(this.cheData.USDT.address, "", "fryer");
        //FRIES
        this.cheData.FRIES.address = getTokenAddress(this.cheData.FRIES.symbol);
        this.cheData.FRIES.balance = await getBalanceToken(this.cheData.FRIES.address);
        this.cheData.FRIES.allowance = await getPoolAllowance(this.cheData.USDT.address, this.cheData.FRIES.address, "fryer");

        this.navs[0].itemData.amount1 = toFixed4(this.cheData.USDT.balance);
        this.navs[0].itemData.amount2 = toFixed4(this.cheData.USDT.poolInfo.TotalDeposited);

        this.navs[1].itemData.amount1 = toFixed4(this.cheData.USDT.poolInfo.maxDebt);
        this.navs[1].itemData.amount2 = toFixed4(this.cheData.USDT.poolInfo.TotalDebt);

        this.navs[2].itemData.amount1 = toFixed4(this.cheData.USDT.poolInfo.maxWithdraw);

        this.navs[3].itemData.amount1 = [toFixed4(this.cheData.USDT.balance), toFixed4(this.cheData.FRIES.balance)];
        this.navs[3].itemData.amount2 = toFixed4(this.cheData.USDT.poolInfo.TotalDebt);

        this.navs[4].itemData.amount1 = toFixed4(this.cheData.USDT.poolInfo.TotalDeposited);
        this.navs[4].itemData.amount2 = toFixed4(this.cheData.USDT.poolInfo.TotalDebt);

        trace("cheData-", this.cheData, this.navs)
      },


    },
    watch: {
      account() {
        if (this.isLogin) {
          this.checkInfo();
        }
      },
      $route(to, from) {
        if (to.path.indexOf("fryer") > 0) {
          if (this.isLogin) {
            this.checkInfo();
          }
        }
      },

    },
    computed: {
      ...mapGetters(["isLogin", "account"]),
    },

    mounted() {
      trace("isLogin", this.isLogin)
      if (this.isLogin) {
        this.checkInfo();
      }
      trace(getTokenAddress("USDT"))
    },

    beforeUpdate() {
      trace("fryer-beforeUpdate")
    },
    updated() {
      trace("fryer-beforeUpdate")
    },

  };
</script>
<style lang="less" scoped>

  .page-baskets {
    width: 1100px;
    margin: auto;

    .che-title {
      margin: 2rem auto;
      text-align: center;

      .p1 {
        font-family: Bugaki;
        font-style: normal;
        font-weight: normal;
        font-size: 42px;
        line-height: 64px;
        color: #171717;
      }

      .p2 {
        font-family: Arial Black;
        font-style: normal;
        font-weight: 900;
        font-size: 20px;
        line-height: 36px;
        text-align: center;

        color: #171717;
      }
    }


  }

</style>
